<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js">
		</script>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="onclick" value="点击" />
			<h1 id="h1" style="color: hotpink;" ref="ish1">
				这是一个H1标签
			</h1>
			<hr>
			<tmp ref="tmp"></tmp>
		</div>
		<template></template>
		<script>
			var tmp = {
				template: '<h1 style="color: hotpink;">这是组件的H1标签</h1>',
				data() {
					return {
						msg: '这是组件上的data'
					}
				},
				methods: {
					show() {
						console.log('这是子组件上的show方法');
					}
				}
			}

			new Vue({
				el: '#app',
				data: {},
				methods: {
					onclick() {
						// console.log('触发了onclick事件')
						/* 
						console.log(document.getElementById('h1').innerText)
						console.log(document.getElementsByTagName('h1')[0].innerText) */
						//....  第二种打印方式   要获取索引值  是第几个的h1 
						//利用ref 属性来放入this 这个对象当中
						// console.log(this.$refs.ish1.innerText)
						//调用子组件的msg
						// console.log(this.$refs.tmp.msg)
						//调用子组件的方法
						this.$refs.tmp.show()
						// console.log(this.$refs.tmp.show()); 这样子还会有一个undifined 控制台打印
					}
				},
				components: {
					tmp
				}

			})
		</script>
	</body>
</html>
